<template>
  <div class="ju-color"
       :class="{'is-selected':value === color}"
       :style="{'--color':color}"
       @click.stop="$emit('change',color)">
  </div>
</template>

<script lang="ts">
  import { Component, Model, Prop, Vue } from "@some21/vue-class-decorator";

  @Component({
    name: "JuColor",
  })
  export default class extends Vue {
    @Model("change", { type: String, required: true })
    value: string;
    @Prop({ type: String })
    color: string;
  }
</script>

<style lang="scss" scoped>
  .ju-color {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: var(--color);
    border-radius: var(--theme-radius);
    transition: all 0.2s;
    cursor: pointer;
    border: 1px solid rgba(var(--theme-primary-rgb), 0.2);
    margin-right: 0.5rem;

    &.is-selected {
      outline: 0.25rem solid rgba(var(--theme-primary-rgb), 0.5);
    }
  }
</style>
